<template>
<view>
	<cu-custom bgColor="bg-gradual-fff" isBack="true">
		<block slot="content">申请退款</block>
	</cu-custom>
	<loading-view v-show="showLoading"></loading-view>
	<view v-show="!showLoading">
		<view class="viewbox"></view>
		<view class="index_d_a">
			<view class="index_d_a_a">
				<custom-image :lazy-load="true" width="140rpx" height="140rpx" radius="0" lazy-load :src="goods.image"></custom-image>
			</view>
			<view class="index_d_a_b">
				<view class="index_d_a_b_a">{{goods.goods_name}}</view>
				<view class="index_d_a_b_b">
					<view class="index_d_a_b_b_c">{{goods.spec_value}}</view>
				</view>
				<view class="index_d_a_b_b">
					<view class="index_d_a_b_b_d">
						<view class="order_a_a_b_b_c_a" v-if="goods.integral==0 && goods.goods_price>0">
							<span>¥</span>{{goods.goods_price}}
						</view>
						<view class="order_a_a_b_b_c_a" v-if="goods.goods_price==0 && goods.integral>0">
							<span>积分</span>{{goods.integral}}
						</view>
						<view class="order_a_a_b_b_c_a" v-if="goods.goods_price>0 && goods.integral>0">
							<span>积分</span>{{goods.integral}}+<span>¥</span>{{goods.goods_price}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="apply_refund_a" :hidden="!hiddenOpt">
			<view class="apply_refund_a_b">
				<view class="apply_refund_a_b_a">退款金额</view>
				<view class="apply_refund_a_b_b">
					<view class="order_a_a_b_b_c_a" v-if="goods.integral==0 && goods.goods_price>0">
						<span>¥</span>{{goods.goods_price}}
					</view>
					<view class="order_a_a_b_b_c_a" v-if="goods.goods_price==0 && goods.integral>0">
						<span>积分</span>{{goods.integral}}
					</view>
					<view class="order_a_a_b_b_c_a" v-if="goods.goods_price>0 && goods.integral>0">
						<span>积分</span>{{goods.integral}}+<span>¥</span>{{goods.goods_price}}
					</view>
				</view>
			</view>
			<view class="apply_refund_a_b" style="height: auto;">
				<view class="apply_refund_a_b_a" style="width: 100%;float:none;">备注说明</view>
				<view class="apply_refund_a_b_c">
					<textarea class="bg-body" placeholder="请描述申请售后的具体原因，100字以内" v-model="remark" name="textarea" ></textarea> 
				</view>
			</view>
			<view class="apply_refund_a_b" style="margin-top: 20rpx;height:auto;">
				<view class="apply_refund_a_b_a" style="width: 100%;float: none;">上传凭证（选填，最多可上传1张）</view>
				<view class="apply_refund_a_b_d">
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="1"
					></u-upload>
				</view>
			</view>
			<view class="apply_refund_b" @click="onSubmit()">提交</view>
		</view>
	</view>
    <u-popup id="popup" :show="showPop" mode="bottom">
		<view class="apply_refund_c">
			<view class="apply_refund_c_a">退款原因</view>
			<scroll-view style="height: 800rpx" :scroll-y="true">
			<view class="apply_refund_c_b">
				<radio-group @change="radioChange">
					<view class="apply_refund_c_b_a" v-for="(item, index) in reason" :key="index" @tap="hidePopup">
						<view class="apply_refund_c_b_a_a">{{item}}</view>
						<view class="apply_refund_c_b_a_b">
							<radio :value="index"></radio>
						</view>
					</view>
				</radio-group>
			</view>
			</scroll-view>
		</view>
    </u-popup>
</view>
</template>

<script>
import request from '@/common/request.js';
import {
	trottle,
	refundOptType
} from '@/utils/type';
export default {
  data() {
    return {
	  showLoading:true,
      hiddenOpt: true,
      optTyle: refundOptType.ONLY_REFUND,
      goods: {},
      reason: [],
      showPop: false,
      reasonIndex: -1,
	  fileList1:[],
      remark: "",
	  uid:0
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let {
      order_id,
      goods_id,
      afterSaleId
    } = options;
    this.orderId =order_id;
    this.goods_id =goods_id;
    this.afterSaleId = afterSaleId;
	this.uid=uni.getStorageSync('uid');
    this.getGoodsInfoFun();
	this.onSubmit = trottle(this.onSubmit, 1000, this)
  },

  methods: {
	// 删除图片
	deletePic(event) {
		this[`fileList${event.name}`].splice(event.index, 1)
	},
	// 新增图片
	async afterRead(event) {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = this[`fileList${event.name}`].length
		lists.map((item) => {
			this[`fileList${event.name}`].push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await this.uploadFilePromise(lists[i].url)
			let item = this[`fileList${event.name}`][fileListLen]
			this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		}
	},
	uploadFilePromise(url) {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: request.baseUrl+'p-icon', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				name: 'image',
				success: (res) => {
					let data= JSON.parse(res.data);
					setTimeout(() => {
						resolve(data.data.avatar_logo)
					}, 1000)
				}
			});
		})
	},
    showPopup() {
      this.showPop = true
    },

    radioChange(e) {
      this.reasonIndex = e.detail.value
    },

    hidePopup() {
      this.showPop = false
    },

    onSubmit() {
        this.applyAfterSaleFun();
    },
    onInput(e) {
      this.setData({
        remark: e.detail.value
      });
      this.remark = e.detail.value
    },

    applyAfterSaleFun() {
      let {
        optTyle,
        remark,
        fileList1
      } = this;
      if (!remark) {
			uni.showToast({
				title: '请输入退款原因',
				icon:'none',
				duration: 2000
			});
			return;
      }
      const paramsList = {
        goods_id: this.goods_id,
        order_id: this.orderId,
        refund_type: optTyle,
        remark: remark,
        img: fileList1.length <= 0 ? '':fileList1[0].url,
		uid:this.uid,
		type:2
      };
	  let optsList = {
	  	url: 'us-add',
	  	method: 'post'
	  };
	  let _this = this;
	  request.httpRequest(optsList, paramsList).then(res => {
	  	if (res.data.code == 1) {
			uni.$emit("refreshorder")
			uni.navigateBack();
	  	}else{
			uni.showToast({
			    title: res.data.msg,
				icon:'none',
			    duration: 2000
			});
		}
	  });
    },

    getGoodsInfoFun() {
	  let paramsList = {
	  	order_id: this.orderId,
	  	uid:this.uid,
		goods_id:this.goods_id
	  }
	  let optsList = {
	  	url: 'us-curriculumInfo',
	  	method: 'get'
	  };
	  let _this = this;
	  request.httpRequest(optsList, paramsList).then(res => {
	  	if (res.data.code == 200) {
	  		_this.goods = res.data.data.goods;
	  		_this.reason = res.data.data.reason;
	  	}
	  	this.showLoading = false;
	  });
    }
  }
};
</script>
<style lang="scss">
	.apply_refund_c{
		padding: 30rpx;
	}
	.apply_refund_c_a{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		width: 100%;
	}
	.apply_refund_c_b{
		overflow: hidden;
	}
	.apply_refund_c_b_a{
		height: 80rpx;
		line-height: 80rpx;
		width:680rpx;
	}
	.apply_refund_c_b_a_a{
		float: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}
	.apply_refund_c_b_a_b{
		float: right;
		width: 50rpx;
		height: 50rpx;
	}
	.apply_refund_c_b_a_b radio{
		transform:scale(0.7)
	}
	.apply_refund_b{
		width: 580rpx;
		height: 88rpx;
		background:#E71102;
		border-radius: 44rpx;
		margin: auto;
		margin-top: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}
	.index_d_a{
		width: 710rpx;
		margin: auto;
		height:auto;
		overflow: hidden;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding:30rpx;
	}
	.index_d_a_a{
		width: 140rpx;
		height: 140rpx;
		border-radius: 15rpx;
		overflow: hidden;
		float: left;
	}
	.index_d_a_b{
		width:440rpx;
		margin-left: 30rpx;
		height: auto;
		float: left;
		position: relative;
	}
	.index_d_a_b_a{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		height: 40rpx;
		overflow: hidden;
		line-height: 40rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.index_d_a_b_b{
		margin-top: 10rpx;
		overflow: hidden;
	}
	.index_d_a_b_b_a{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
		line-height: 42rpx;
	}
	.index_d_a_b_b_b{
		float: left;
	}
	.index_d_a_b_b_d{
		float: left;
		line-height: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF6000;
	}
	.order_a_a_b_b_c_a{
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4D4F;
	}
	.order_a_a_b_b_c_a span{
		font-size: 24rpx;
	}
	.index_d_a_b_b_e{
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CCCCCC;
		line-height: 50rpx;
	}
	.index_d_a_b_b_b_a{
		background: #FFFFFF;
		border: 1px solid #E5E5E5;
		border-radius: 5px;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 10rpx;
		float: left;
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FA7428;
	}
	.index_d_a_b_b_c{
		float: left;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 42rpx;
	}
	
	.apply_refund_a{
		width: 710rpx;
		height: auto;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 20rpx;
		padding:30rpx;
		background-color: #FFFFFF;
	}
	.apply_refund_a_a{
		width: 100%;
		background-position: right;
		background-repeat: no-repeat;
		background-size: 28rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #CCCCCC;
	}
	.apply_refund_a_a_a{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}
	.apply_refund_a_a_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.apply_refund_a_b{
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden;
	}
	.apply_refund_a_b_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		float: left;
		width: 150rpx;
	}
	
	.apply_refund_a_b_b{
		float: left;
		margin-left: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		width: 440rpx;
	}
	.apply_refund_a_b_c{
		width: 100%;
		height: 300rpx;
		margin-top: 20rpx;
	}
	.apply_refund_a_b_c textarea{
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #CCCCCC;
		height: 300rpx;
	}
	.apply_refund_a_b_d{
		width: 100%;
		height: auto;
		margin-top: 20rpx;
	}
</style>